<template>
  <router-link to="" tag="div" class="singerimg" >
    <div class="best">
      <div class="bet">最佳匹配</div>
      <img :src="`${bestsinger.img1v1Url}`" />
    </div>
    <div class="box" @click="singer=true">
      <!-- bestsinger.name -->
      歌手:<em  v-html="$options.filters.highKey(bestsinger.name,keywords)"></em>{{ bestsinger.alia | filtersarr }}
    </div>
    <hr />
    <div v-if="singer">
      <singer-details :singerId="singerId" @singer="singer=$event"></singer-details>
    </div>
  </router-link>
</template>

<script>
import SingerDetails from '@/components/SingerDetails'
export default {
  props: ["keywords"],
  data() {
    return {
      bestsinger: [],
      singer:false,
      singerId:0
    };
  },
  created() {
    this.axios
      .get(`/search?keywords=${this.keywords}&type=100`)
      .then((result) => {
        // console.log("best最佳匹配歌手==>", result.data.result.artists);
        this.bestsinger = result.data.result.artists[0];
        this.singerId=result.data.result.artists[0].id;
      });
  },
  filters: {
    filtersarr(val) {
      if (val == undefined) {
        return;
      } else {
        return (':('+val + ""+")");
      }
    },
    highKey(val, keywords) {
      let reg = new RegExp(`${keywords}`, "g");
      if (reg.test(val)) {
        //把关键词 替换成 <b style="color:red">关键词</b>
        val = val.replace(reg, `<b style="color:#507daf">${keywords}</b>`);
      }
      return val;
    }
  },
  components: {
    SingerDetails,
  },
};
</script>

<style lang="less" scoped>
.singerimg {
  position: relative;
  .best {
    .bet {
      margin-left: 10px;
      font-size: 12px;
      line-height: 16px;
      color: #666;
    }
    img {
      width: 50px;
      height: 50px;
      padding: 10px 10px 0px 10px;
    }
  }
  .box {
    //   line-height: 50px;
    left: 75px;
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
    font-size: 17px;
    color: #333;
  }
  hr {
    height: 0px;
    border: none;
    border-bottom: 1px solid #ebecec;
  }
}
</style>